import React, { Component } from "react";
import { connect } from "react-redux";
import { getBillBoard } from "../../redux/actions";
import { Card, List, NavBar, Icon } from "antd-mobile";
import { formatTimeToStr } from "../../api/date";
import "./index.scss";

const ListItem = List.Item;

class Index extends Component {
  componentDidMount() {
    const billBoardId = this.props.match.params.billBoardId;
    const type = this.props.match.params.type;
    this.props.getBillBoard(billBoardId, type);
  }
  formatDate = time => {
    if (time != null && time != "") {
      let date = new Date(time);
      return formatTimeToStr(date, "yyyy-MM-dd");
    } else {
      return "";
    }
  };
  render() {
    // console.log( this.props.billBoard);
    let { coverImgUrl, name, updateTime, tracks } = this.props.billBoard;
    tracks = tracks ? tracks : [];
    return (
      <div>
        <NavBar
          icon={<Icon type="left" />}
          className="sticky-header"
          onLeftClick={() => this.props.history.goBack()}
        >
          {this.props.match.params.navTitle.length > 10
            ? this.props.match.params.navTitle.substring(0, 10)
            : this.props.match.params.navTitle}
        </NavBar>
        <div id="billBoard" className="bill-board">
          <Card>
            <div className="bill-board-logo">
              <img src={coverImgUrl} />
            </div>
            <div className="bill-board-logo-1">
              <img src={coverImgUrl} />
              <span className="bill-board-info">
                <div>
                  <h3 className="bill-board-info-name">{name}</h3>
                  <span className="bill-board-info-time">
                    更新日期：{this.formatDate(updateTime)}
                  </span>
                </div>
              </span>
            </div>
          </Card>
          <List>
            <ul className="bill-board-item">
              {tracks.map((item, index) => {
                if (index < 3) {
                  return (
                    <li key={index}>
                      <span className="bill-board-item-number bill-board-item-number1">
                        {index + 1 < 10 ? "0" + (index + 1) : index + 1}
                      </span>
                      <span className="bill-board-item-content">
                        <span className="bill-board-item-content-name">
                          {item.title}
                        </span>
                        <span className="bill-board-item-content-arName">
                          {item.artist}
                        </span>
                      </span>
                      <span className="bill-board-item-content-playicon iconfont">
                        &#xe6bf;
                      </span>
                    </li>
                  );
                } else {
                  return (
                    <li key={index}>
                      <span className="bill-board-item-number">
                        {index + 1 < 10 ? "0" + (index + 1) : index + 1}
                      </span>
                      <span className="bill-board-item-content">
                        <span className="bill-board-item-content-name">
                          {item.title}
                        </span>
                        <span className="bill-board-item-content-arName">
                          {item.artist}
                        </span>
                      </span>
                      <span className="bill-board-item-content-playicon iconfont">
                        &#xe6bf;
                      </span>
                    </li>
                  );
                }
              })}
            </ul>
          </List>
        </div>
      </div>
    );
  }
}
export default connect(state => ({ billBoard: state.billBoard }), {
  getBillBoard
})(Index);
